<template>
    <div class="body">
        <nav>
            <div class="navtitle"><strong>HZR</strong>|MY PROFILE</div>
            <router-link to="/home">HOME</router-link>
            <router-link to="/about">ABOUT</router-link>
            <router-link to="/blog">BLOG</router-link>
            <router-link to="/album">ALBUM</router-link>
            <router-link to="/join">JOIN</router-link>
            <div class="navanim home"></div>
            <div class="none"></div>
        </nav>
        <div class="mid">
        <ul id="banner" class="banner"></ul>
    </div>

    <footer class="foot">
            <!-- <p>&emsp;</p> -->
            <p>@2023  |  BY:yiyule10</p>
            <p>网页版权归YI所有</p>
            <p>Cease to struggle and you cease to live</p>
        </footer>
    </div>
</template>

<script>
    import "../assets/css/album.css";
    import "../assets/css/body.css";
    import "../assets/css/nav.css"
    export default {
  data() {
    return {
      pics: [],
      dots: [],
      timer: null,
      len: 0
    };
  },
  mounted() {
    this.initBanner();
    this.timer = setInterval(this.getpre, 3000);
  },
  methods: {
    initBanner() {
      const banner = document.getElementById('banner');
      for (let i = 1; i <= 5; i++) {
        const lbli = document.createElement('li');
        const lbimg = document.createElement('img');
  
        lbimg.src = `../image/pics0${i}.jpg`;
        lbimg.style.width = '750px';
        lbimg.style.height = '421px';
        lbli.appendChild(lbimg);
  
        banner.appendChild(lbli);
        this.pics.push({ src: lbimg.src, id: i > 3 ? i - 3 : i + 2 });
  
        const bottomdot = document.createElement('div');
        bottomdot.style.left = `${140 * (i + 1)}px`;
        bottomdot.name = i;
        this.dots.push(bottomdot);
        banner.appendChild(bottomdot);
      }
  
      this.len = this.pics.length - 1;
      // 设置初始样式
      // ...
    },
    getnext() {
      // 实现getnext函数的逻辑
      // ...
    },
    getpre() {
      // 实现getpre函数的逻辑
      // ...
    },
    dotmov() {
      // 实现dotmov函数的逻辑
      // ...
    }
  }
};
</script>

<style scoped>

</style>